window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback, element) {
                window.setTimeout(callback, 17);
            };
})();

window.cancelRequestAnimFrame = (function () {
    return window.cancelAnimationFrame ||
        window.webkitCancelRequestAnimationFrame ||
        window.mozCancelRequestAnimationFrame ||
        window.oCancelRequestAnimationFrame ||
        window.msCancelRequestAnimationFrame ||
        clearTimeout
})();


function CanvasClass() {
    this.GameName = '';

    this.canvas = {
        'Main': {
            'Id': 'GameMain',
            'Canvas': null,
            'Context': null,
            'Width': 1239,
            'Height': 747,
            'Animate': true,
        },
        'Text': {
            'Id': 'GameText',
            'Canvas': null,
            'Context': null,
            'Width': 1239,
            'Height': 747,
            'Animate': false,
        },
        'Animate': {
            'Id': 'GameAnimate',
            'Canvas': null,
            'Context': null,
            'Width': 1239,
            'Height': 747,
            'Animate': true,
        },
    };

    this.scale = 1;
    this.intensity = 1;
    this.fps = 25;
    this.gameScale = 1;

    this.now = Date.now();
    this.then = Date.now();
    this.interval = 1000 / this.fps;
    this.delta;

    this.EventId = '';
    this.DoubleButton = false;
    this.FinishButton = false;

    this.StartView = true;

    this.AnimateNow = [];
    this.AnimateThen = [];
    this.AnimateInterval = [];
    this.AnimateDelta = [];
    this.AnimateIndex = [];
    for(var i = 0; i < 10; i++) {
        this.AnimateNow[i] = Date.now();
        this.AnimateThen[i] = Date.now();
        this.AnimateInterval[i] = 1000 / this.fps;
        this.AnimateDelta[i] = 0;
        this.AnimateIndex[i] = 0;
    }

    this.Sound = true;
    this.StaticContentUrl = "";

    this.Redraw = true;
    this.RedrawIndex = 0;
    this.Init = function() {
        for(var canvas in this.canvas) {
            this.canvas[canvas]['Canvas'] = document.getElementById(this.canvas[canvas]['Id']);
            this.canvas[canvas]['Canvas'].width = this.canvas[canvas]['Width'];
            this.canvas[canvas]['Canvas'].height = this.canvas[canvas]['Height'];
            this.canvas[canvas]['Context'] = this.canvas[canvas]['Canvas'].getContext('2d');
        }

        this.StaticContentUrl = $('#StaticContentUrl').val();
        if(this.StaticContentUrl.indexOf("?")) {
            this.StaticContentUrl = this.StaticContentUrl.split("?");
            this.StaticContentUrl = this.StaticContentUrl[0];
        }
        this.Redraw = true;
    };    

    this.FadeInfo = function(Opacity, OpacitySpeed, OpacityMin, OpacityMax) {
        this.Opacity = Opacity;
        this.OpacitySpeed = OpacitySpeed;
        this.OpacityMin = OpacityMin;
        this.OpacityMax = OpacityMax;
    };

    this.FadeInfoUpdate = function(FadeInfo) {
        FadeInfo.Opacity += FadeInfo.OpacitySpeed;
        if(FadeInfo.Opacity < FadeInfo.OpacityMin) {
            FadeInfo.OpacitySpeed *= -1;
            FadeInfo.Opacity = FadeInfo.OpacityMin;
        } else if(FadeInfo.Opacity > FadeInfo.OpacityMax) {
            FadeInfo.OpacitySpeed *= -1;
            FadeInfo.Opacity = FadeInfo.OpacityMax;
        }
    };

    this.Fade = function(ImageId, Image, FadeInfo) {
        this.canvas['Main']['Context'].save();
        this.FadeInfoUpdate(FadeInfo);
        this.canvas['Main']['Context'].globalAlpha = FadeInfo.Opacity;
        var n = GameImages[ImageId];
        this.CanvasDrawImage(this.canvas['Main']['Context'], n, Image, ImageId);
        this.canvas['Main']['Context'].restore();
    };

    this.DrawBoard = function() { 

    };

    this.AnimateCanvas = function() {
        for(var canvas in this.canvas) {
            if(this.canvas[canvas]['Animate'] || this.Redraw) {                
                this.canvas[canvas]['Canvas'].width = this.canvas[canvas]['Width'];
                this.canvas[canvas]['Canvas'].height = this.canvas[canvas]['Height'];
            }
        }
        this.DrawBoard();
    }

    this.CacheImages = false;
    this.TempImage = {};
    this.CanvasDrawImage = function(context, ImageInfo, ImageId, Name) { 
        if(this.CacheImages) {
            var ImageName = 'Image' + Name;
            if(TempImage[ImageName] !== undefined && TempImage[ImageName] !== null) {
                
            } else {   
                var canvasTemp = document.createElement("canvas"),
                tCtx = canvasTemp.getContext("2d");
                canvasTemp.width = ImageInfo.width * ImageInfo.scale;
                canvasTemp.height = ImageInfo.height * ImageInfo.scale; 
                tCtx.drawImage(
                    //Images[ImageId],
                    document.getElementById(ImageId),
                    ImageInfo.backgroundLeft,
                    ImageInfo.backgroundTop,
                    ImageInfo.width,
                    ImageInfo.height,
                    0, 0,
                    ImageInfo.width * ImageInfo.scale,
                    ImageInfo.height * ImageInfo.scale
                );
                TempImage[ImageName] = canvasTemp;
            }

            if(TempImage[ImageName] !== undefined && TempImage[ImageName] !== null) {
                context.drawImage(TempImage[ImageName], ImageInfo.positionLeft, ImageInfo.positionTop);
            }
        } else {
            context.drawImage(
                //Images[ImageId],
                document.getElementById(ImageId),
                ImageInfo.backgroundLeft,
                ImageInfo.backgroundTop,
                ImageInfo.width,
                ImageInfo.height,
                ImageInfo.positionLeft, ImageInfo.positionTop,
                ImageInfo.width * ImageInfo.scale,
                ImageInfo.height * ImageInfo.scale
            );
        }
    };

    this.TempAnimate = {};
    this.DrawAnimate = function (context, index, imageId, spriteJson, maxFrameCount, startFrame, endFrame, repeatFrame, x, y, rightMode, multi, scale) {
        if (maxFrameCount == 0) {
            if (this.AnimateIndex[index] + 1 < startFrame) {
                this.AnimateIndex[index] = startFrame - 1;
            } else if (this.AnimateIndex[index] + 1 > endFrame && repeatFrame == 1) {
                this.AnimateIndex[index] = startFrame - 1;
            } else if (this.AnimateIndex[index] + 1 > endFrame) {
                this.AnimateIndex[index] = endFrame - 1;
            }
        } else {
            if (this.AnimateIndex[index] + 1 > maxFrameCount) {
                this.AnimateIndex[index] = 0;
            }
        }
        var position = parseInt(this.AnimateIndex[index]) + 1;

        var AnimateName = imageId;
        var Cache = false;
        var ValidAnimate = ['Animal0'];

        if(this.CacheImages && ValidAnimate.indexOf(AnimateName) >= 0) {
            Cache = true;
        }

        if(this.CacheImages && Cache) {
            if(TempAnimate[AnimateName] == undefined) {
                TempAnimate[AnimateName] = {};
            }
            var canvasX = x;
            var canvasY = y;
            x = 0;
            y = 0;

            if(TempAnimate[AnimateName] !== undefined && TempAnimate[AnimateName][position] !== undefined && TempAnimate[AnimateName][position] !== null) {
                
            } else {    
                if(spriteJson == null) spriteJson = SpriteJSON[AnimateName]['Json'];   
                var ii = this.FindIndexByKeyValue(spriteJson, 'f', position, multi);
                var j = ii[0];
                var i = ii[1];
                var xAdd = 0, yAdd = 0, width = 0, height = 0, posX = 0, posY = 0, rotated = false;


                if(multi) {
                    imageId += '-' + j;
                    spriteJson = spriteJson[j];
                }

                var imageWidth = 0;
                var imageHeight = 0;
                if (spriteJson[i] === undefined) {
                    console.log(i + ' ' + position + ' ' + imageId + ' ' + maxFrameCount);
                    //return false;
                } else {
                    rotated = spriteJson[i].r;
                    posX = spriteJson[i].fr.x;
                    posY = spriteJson[i].fr.y;
                    if (rotated) {
                        width = spriteJson[i].fr.h;
                        height = spriteJson[i].fr.w;

                        x = spriteJson[i].s.x * scale;
                        y = spriteJson[i].s.y * scale;

                        imageWidth = spriteJson[i].ss.w * scale;
                        imageHeight = spriteJson[i].ss.h * scale;
                    } else {
                        width = spriteJson[i].fr.w;
                        height = spriteJson[i].fr.h;

                        x = spriteJson[i].s.x * scale;
                        y = spriteJson[i].s.y * scale;

                        imageWidth = spriteJson[i].ss.w * scale;
                        imageHeight = spriteJson[i].ss.h * scale;
                    }
                }

                var canvasTemp = document.createElement("canvas"),
                tCtx = canvasTemp.getContext("2d");
                canvasTemp.width = imageWidth;
                canvasTemp.height = imageHeight;
                //if(AnimateName == 'Drink0') console.log(imageWidth, imageHeight);

                var xMinus = 0;
                if(rightMode !== undefined && rightMode) {
                    tCtx.save();
                    tCtx.scale(-1, 1);
                    xMinus = 1920;
                }

                if (rotated) {
                    tCtx.save();
                    tCtx.translate(x - xMinus, y);

                    tCtx.save();
                    tCtx.translate(height * scale / 2, width * scale / 2);
                    tCtx.rotate(-90 * Math.PI / 180);
                    tCtx.drawImage(
                        //Images[imageId],
                        document.getElementById(imageId),
                        posX,
                        posY,
                        width,
                        height,
                        -width * scale / 2, -height * scale / 2,
                        width * scale,
                        height * scale
                    );
                    tCtx.restore();

                    tCtx.restore();
                } else {
                    tCtx.drawImage(
                        //Images[imageId],
                        document.getElementById(imageId),
                        posX,
                        posY,
                        width,
                        height,
                        x - xMinus, y,
                        width * scale,
                        height * scale
                    );
                }

                if(rightMode !== undefined && rightMode) {
                    tCtx.restore();
                }

                TempAnimate[AnimateName][position] = canvasTemp;
            }

            if(TempAnimate[AnimateName] !== undefined && TempAnimate[AnimateName][position] !== undefined && TempAnimate[AnimateName][position] !== null) { 
                context.drawImage(TempAnimate[AnimateName][position], canvasX, canvasY);
            }
        } else {
            if(spriteJson == null) spriteJson = SpriteJSON[AnimateName]['Json'];   
            var ii = this.FindIndexByKeyValue(spriteJson, 'f', position, multi);
            var j = ii[0];
            var i = ii[1];
            var xAdd = 0, yAdd = 0, width = 0, height = 0, posX = 0, posY = 0, rotated = false;


            if(multi) {
                imageId += '-' + j;
                spriteJson = spriteJson[j];
            }

            if (spriteJson[i] === undefined) {
                console.log(i + ' ' + position + ' ' + imageId + ' ' + maxFrameCount);
                //return false;
            } else {
                rotated = spriteJson[i].r;
                posX = spriteJson[i].fr.x;
                posY = spriteJson[i].fr.y;
                if (rotated) {
                    width = spriteJson[i].fr.h;
                    height = spriteJson[i].fr.w;

                    x += spriteJson[i].s.x * scale;
                    y += spriteJson[i].s.y * scale;
                } else {
                    width = spriteJson[i].fr.w;
                    height = spriteJson[i].fr.h;

                    x += spriteJson[i].s.x * scale;
                    y += spriteJson[i].s.y * scale;
                }
            }
            
            var xMinus = 0;
            if(rightMode !== undefined && rightMode) {
                context.save();
                context.scale(-1, 1);
                xMinus = 1920;
            }

            if (rotated) {
                context.save();
                context.translate(x - xMinus, y);

                context.save();
                context.translate(height * scale / 2, width * scale / 2);
                context.rotate(-90 * Math.PI / 180);
                context.drawImage(
                    //Images[imageId],
                    document.getElementById(imageId),
                    posX,
                    posY,
                    width,
                    height,
                    -width * scale / 2, -height * scale / 2,
                    width * scale,
                    height * scale
                );
                context.restore();

                context.restore();
            } else {
                context.drawImage(
                    //Images[imageId],
                    document.getElementById(imageId),
                    posX,
                    posY,
                    width,
                    height,
                    x - xMinus, y,
                    width * scale,
                    height * scale
                );
            }

            if(rightMode !== undefined && rightMode) {
                context.restore();
            }
        }

        if (this.delta > this.interval) {
            this.then = this.now - (this.delta % this.interval);
            this.AnimateIndex[index] += 1;
        }
    };

    this.FindIndexByKeyValue = function(obj, key, value, multi) {
        if(multi) {
            for(var j = 0; j < obj.length; j++) {
                for (var i = 0; i < obj[j].length; i++) {
                    if (obj[j][i][key] == value) {
                        return [j, i];
                    }
                }
            }
        } else {
            for (var i = 0; i < obj.length; i++) {
                if (obj[i][key] == value) {
                    return [-1, i];
                }
            }
        }
        console.log(key + ' ' + value);
        return [null, null];
    }

    this.DrawText = function(context, text, left, top, font, color, align, valign, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, strokeWidth, strokeColor, CacheName) {
        context.save();

        context.font = font;
        context.textAlign = align;
        context.textBaseline = valign;
        context.fillStyle = color;

        if(strokeWidth !== undefined && strokeWidth !== 0) {
            context.lineWidth = strokeWidth;
            context.strokeStyle = strokeColor;
            context.strokeText(text, left, top);
        }

        if(shadowColor !== undefined && shadowColor !== '') {
            context.shadowColor = shadowColor;
            context.shadowOffsetX = shadowOffsetX; 
            context.shadowOffsetY = shadowOffsetY; 
            context.shadowBlur = shadowBlur;
        }
        context.fillText(text, left, top);

        context.restore();
    };

    this.DrawTextNew = function(context, text, params) {
        var TextWidth = 0;
        context.save();

        context.font = params.font;
        context.textAlign = params.align;
        context.textBaseline = params.valign;
        context.fillStyle = params.color;

        TextWidth = context.measureText(text).width;

        if(params.strokeWidth !== undefined && params.strokeWidth !== 0) {
            context.lineWidth = params.strokeWidth;
            context.strokeStyle = params.strokeColor;
            context.strokeText(text, params.x, params.y);
        }

        if(params.shadowColor !== undefined && params.shadowColor !== '') {
            context.shadowColor = params.shadowColor;
            context.shadowOffsetX = params.shadowOffsetX;
            context.shadowOffsetY = params.shadowOffsetY;
            context.shadowBlur = params.shadowBlur;
        }
        context.fillText(text, params.x, params.y);

        context.restore();
        return TextWidth.toFixed(2);
    };

    this.IntToArray = function(number) {
        number += '';
        var result = number.split('');        
        return result;
    };

    this.ButtonHover = function(Button, offsetX, offsetY) {
        if(offsetX >= Button.positionLeft && 
            offsetY >= Button.positionTop && 
            offsetX <= Button.positionLeft + Button.width && 
            offsetY <= Button.positionTop + Button.height
        ) {
            return true;
        }
        return false;
    };

    this.DrawPolygon = function(context, Points, Color) {
        context.fillStyle = Color;
        context.beginPath();
        context.moveTo(Points[0].x, Points[0].y);
        for(var i = 1; i < Points.length - 1; i++) {
            context.lineTo(Points[i].x, Points[i].y);
        }
        context.closePath();
        context.fill();
    };

    this.isPointInPoly = function(poly, ptx, pty) {
        for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
            ((poly[i].y <= pty && pty < poly[j].y) || (poly[j].y <= pty && pty < poly[i].y))
            && (ptx < (poly[j].x - poly[i].x) * (pty - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
            && (c = !c);
        return c;
    }

    this.PolygonCenter = function(poly) {
        var x = 0,
            y = 0,
            length = poly.length,
            i,
            j,
            f,
            point1,
            point2;

        for (i = 0, j = length - 1; i < length; j = i, i += 1) {
            point1 = poly[i];
            point2 = poly[j];
            f = point1.x * point2.y - point2.x * point1.y;
            x += (point1.x + point2.x) * f;
            y += (point1.y + point2.y) * f;
        }

        f = this.PolygonArea(poly, length) * 6;

        return new this.PolygonPoint(x / f, y / f);
    }

    this.PolygonArea = function (poly, length) {
        var area = 0,
            i,
            j,
            point1,
            point2;

        for (i = 0, j = length - 1; i < length; j = i, i += 1) {
            point1 = poly[i];
            point2 = poly[j];
            area += point1.x * point2.y;
            area -= point1.y * point2.x;
        }
        area /= 2;

        return area;
    };

    this.PolygonPoint = function(x, y) {
        this.x = x;
        this.y = y;
    };

    this.GetBetCoor = function(BetName) {
        var el = $(".table").find("[data-name='" + BetName + "']");
        //var left = el.position().left;
        //var top = el.position().top;
        var left = el.css('left'); left += ''; left = left.replace('px', ''); left = parseInt(left);
        var top = el.css('bottom'); top += ''; top = top.replace('px', ''); top = parseInt(top); top = 596 - (top + el.height());
        var width = el.width();
        var height = el.height();
        left += width / 2;
        top += height / 2;

        return new this.PolygonPoint(left, top);
    };
    this.shuffle = function(a) {
        var j, x, i;
        for (i = a.length; i; i -= 1) {
            j = Math.floor(Math.random() * i);
            x = a[i - 1];
            a[i - 1] = a[j];
            a[j] = x;
        }
    };













    this.BoardVersion = 0;
    this.DealNumber = '';
    this.NewDealNumber = '';
    this.IsGameFinished = false;
    this.IsGameStarted = true;
    this.IsObserver = false;
    this.PlayerKey = '';
    this.TotalBet = 0.5;
    this.TotalWinAmount = 0;
    this.NewTotalWinAmount = 0;

    //Player
    this.AvailableAmount = 0;
    this.NewAvailableAmount = 0;
    this.Avatar = "";
    this.DeviceType = "Web";
    this.DisplayName = "Pkhako";
    this.IsOffline = false;
    this.IsPlayerTurn = true;
    this.Message = null;
    this.PlayerId = "";
    this.TimeElapsed = 0;

    this.EventId = '';

    this.PlayerKick = false;
    this.PlayerKickMessage = '';

    this.LoadData = function(data, selectedOption, CurrentTripleSevenGameState) {

    };

    this.copyJson = function(json) {
        return JSON.parse(JSON.stringify(json));
    };

    this.RoundNumber = function(number) {
        return (this.BalanceToInt(number) / 100).toFixed(2);
    };

    this.BalanceToInt = function(Balance) {
        var BalanceString = Balance + '';
        var PointIndex = -1;
        var BalanceLength = BalanceString.length;
        var NewBalance = '';
        var AfterPoint = 0;
        for(var i = 0; i < BalanceLength; i++) {
            if(BalanceString[i] == '.') {
                PointIndex = i;
            } else {
                if(PointIndex != -1) {
                    AfterPoint++;
                }
                if(AfterPoint > 2) {

                } else {
                    NewBalance += BalanceString[i];    
                }
            }
        }
        if(PointIndex == -1) {
            NewBalance += '00'; 
        } else {
            if(BalanceLength - PointIndex - 1 < 2) NewBalance += '0'; 
        }
        Balance = parseInt(NewBalance);

        return Balance;
    }
}

let horizontalCanvas;
let horizontalSpine;
let horizontalCanvasContainer;
if(!drawSpine){
    function drawSpine(spineData, params, skin) {

        let spineObject = new PIXI.spine.Spine(spineData);
        AvWidth = spineObject.spineData.width;
        AvHeight = spineObject.spineData.height;
    
        let animationIndex = 0;
        if (params !== undefined && params !== null && params.animationIndex !== undefined) {
            animationIndex = params.animationIndex;
        }
    
        let skinName;
        if (spineData.skins.length === 0) {
            skinName = '';
        } else if (skin !== undefined) {
            skinName = skin;
        } else if (spineData.skins.length > 0) {
            skinName = spineData.skins[0].name;
        }
        let animationName = spineData.animations[animationIndex].name;
    
        // set current skin
        if (skinName !== '') spineObject.skeleton.setSkinByName(skinName);
        spineObject.skeleton.setSlotsToSetupPose();
        // set the position
        if (params !== undefined && params !== null) {
            for (let key in params) {
                if (key !== 'container' && key !== 'tempContainer' && key !== 'animationIndex' && key !== 'animate' && key !== 'animateLoop' && key !== 'align' && key !== 'verticalAlign') {
                    if (key === 'x') {
                        let x;
                        if (params.align !== undefined && params.align === 'Left') {
                            x = params[key];
                        } else {
                            x = params[key] + AvWidth / 2;
                        }
                        spineObject['defaultX'] = x;
                        spineObject[key] = spineObject['defaultX'];
                    } else if (key === 'y') {
                        let y;
                        if (params.verticalAlign !== undefined && params.verticalAlign === 'Top') {
                            y = params[key];
                        } else {
                            y = params[key] + AvHeight / 2;
                        }
                        spineObject[key] = y;
                    } else if (key === 'scale') {
                        spineObject.scale.set(params[key]);
                    } else if (key === 'scaleX') {
                        spineObject.scale.x = params[key];
                    } else {
                        spineObject[key] = params[key];
                    }
                }
            }
        }
    
        let animateLoop = true;
        if (params !== undefined && params !== null && params.animateLoop !== undefined) {
            animateLoop = params.animateLoop;
        }
    
        // play animation
        if (params !== undefined && params !== null && params.animate !== undefined && !params.animate) {
    
        } else {
            spineObject.state.setAnimation(0, animationName, animateLoop);
        }
    
        let container = null;
        if (params !== undefined && params !== null && params.container !== undefined) {
            if (typeof params.container === "string") {
                container = gameContainer[params.container].container;
            } else {
                container = params.container;
            }
        }
        if(container) container.addChild(spineObject);
    
        sortContainerChildren(container);
        return spineObject;
    };
};
if(!sortContainerChildren){
    function sortContainerChildren(container) {
        container.children.sort(function (a, b) {
            a.zOrder = a.zOrder || 0;
            b.zOrder = b.zOrder || 0;
            return a.zOrder - b.zOrder
        });
    };
}

function drawHorizontalCanvas() {
    if(!mobileDevice) return false;

    let spineItem;
    horizontalCanvas = new PIXI.Application({
        width: 1970,
        height: 760,
        transparent: true,
        autoResize: true
    });
    document.getElementsByClassName('horizontal-view')[0].appendChild(horizontalCanvas.view);


    let container = new PIXI.Container();
    horizontalCanvas.stage.addChild(container);
    container.x = 985;
    container.y = 380;

    let graphic = new PIXI.Graphics();
    graphic.beginFill(0xff0000, 0.001);
    graphic.drawRect(0, 0, 1970, 760);
    graphic.x = 0;
    graphic.y = 0;
    graphic.zOrder = 2;
    container.addChild(graphic);

    container.pivot.x = 985;
    container.pivot.y = 380;

    horizontalCanvasContainer = container;

    let spine = null;
    if(GameName === 'VaBank') {
        spine = vabank.Loader.resources['Horizontal'].spineData;
    } else if(GameName === 'Cappadocia') {
        spine = loader.resources['Horizontal'].spineData;
    } else if(GameName === 'Balloon') {
        spine = balloonAnimations.Loader.resources['Horizontal'].spineData;
    } else if(GameName === 'HunterX') {
        spine = gameSpine['Spine-Horizontal'].spineAnimations;
    } else if(GameName === 'MineIsland') {
        spine = gameSpine['Spine-Horizontal'].spineAnimations;
    } else if(GameName === 'SmashX') {
        spine = gameSpine['Spine-Horizontal'].spineAnimations;
    }else if(GameName === 'RollX') {
        spine = rollXCanvas.Loader.resources['Horizontal'].spineData;
    }



    horizontalSpine = drawSpine(spine, {
        container: container,
        x: 930,
        y: 148,
        scale: 1,
        animate: false,
        align: 'Left',
        verticalAlign: 'Top',
    });
    horizontalSpine.state.setAnimation(0, 'animation', true);

    scaleHorizontalCanvas();
}

function scaleHorizontalCanvas() {
    if(!mobileDevice) return false;

    let windowHeight = $(window).height();
    let height = 760;
    let scale = windowHeight / height;
    $('.horizontal-view canvas').css({
        'transform': 'scale(' + scale + ',' + scale + ')'
    });
}